<style>
    #van_info_edit_frame .lonix.left {
        float: left;
    }
    #van_info_edit_frame .lonix.right {
        float: right;
    }
    #van_info_edit_frame #owner_base_info {
        width:610px;
        height:470px;
        background:#eeeeee;
        border:1px solid #cccccc;
        border-radius:4px;
    }
    #van_info_edit_frame #owner_info {
        float:left;
        width:510px;
        height:470px;
    }
    #van_info_edit_frame #owner_header {
        float:left;
        width:99px;
        height:470px;
        text-align:center;
        border-left:1px solid #cccccc;
    }
    #van_info_edit_frame #owner_header > img {
        width:75px;
        height:75px;
        margin:25px auto;
        background: #cccccc;
        border:1px solid #999999;
        border-radius:75px;
    }
    #van_info_edit_frame #owner_info > table {
        border:none;
        margin:15px auto;
    }
    #van_info_edit_frame #owner_info > table th {
        text-align: right;
    }
    #van_info_edit_frame #owner_info > table th, #owner_info > table td {
        padding:6px !important;
    }
    #van_info_edit_frame #owner_vehicles {
        position: relative;
        background:#eeeeee;
        border:1px solid #cccccc;
        border-radius:4px;
        height:470px;
        margin-bottom:10px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #van_info_edit_frame #owner_vehicles td {
        padding:5px;
    }

    #van_info_edit_frame #permission_group {
        height:100px;
        overflow-y:scroll;
    }
    #van_info_edit_frame #owner_permission_group label, #owner_vehicles label, #owner_parks label {
        margin:0px;
        padding:5px;
        display: block;
        background: #e0e0e0;
    }
    #van_info_edit_frame .vehicle_div {
        position: relative;
        float: left;
        width:220px;
        height:190px;
        border-radius: 5px;
        margin:10px;
        padding: 0px 8px;
        border:1px dashed #999999;
        box-shadow: #909090 0px 1px 8px;
        background-color: #ffffff;
    }
    #van_info_edit_frame .vehicle_div input, #van_info_edit_frame .vehicle_div select {
        width: 120px;
    }
    #van_info_edit_frame .vehicle_div.add {
        transition: all ease .2s;
        box-shadow: none;
        background: url("images/add64-cc.png") no-repeat center #e0e0e0;
    }
    #van_info_edit_frame .vehicle_div.add:active {
        box-shadow: 5px 5px 20px #c0c0c0 inset;
    }
    #van_info_edit_frame .vehicle_div label {
        background: transparent !important;
    }
    #van_info_edit_frame .vehicle_no {
        font-style: italic;
        font-size:20px;
        text-align: center;
        margin-bottom:8px;
    }
    #van_info_edit_frame .vehicle_no input[type=text] {
        padding:5px 10px;
        text-align: center;
        font-size: 20px !important;
    }
    #van_info_edit_frame .vehicle_div label input[type=text], #van_info_edit_frame .vehicle_div label select {
        width:80%;
        font-size:14px !important;
    }
    #van_info_edit_frame .vehicle_toolbar {
        position: absolute;
        right:5px;
        top:5px;
    }
    #van_info_edit_frame .delete_vehicle {
        position: absolute;
        right:-5px;
        top:-5px;
        height:18px;
        width:18px;
        background: url("images/close_03.png") center;
        background-size:100%;
    }
</style>
<!-- 车主信息编辑模块 -->
<section id="van_info_edit_frame" style="position: relative;">
    <div class="step two" style="width:630px;height:580px;">
        <div class="step-heads">
            <div class="step-head" data-no="1">
                <div class="step-title">商铺车信息</div>
                <div class="step-desc">基本的信息</div>
            </div>
            <div class="step-head" data-no="2">
                <div class="step-title">车辆登记登记信息</div>
                <div class="step-desc">编辑车辆信息</div>
            </div>
        </div>
        <div class="step-content" style="height: 525px; border:none;">
            <div class="step-content-item" data-no="1">
                <div class="lonix left">
                    <!-- 车主基本信息 -->
                    <article id="owner_base_info">
                        <div id="owner_info">
                            <input type="hidden" name="ownerCode" />
                            <table>
                                <tr>
                                    <th>姓名：</th>
                                    <td><input type="text" class="k-textbox" name="ownerName" style="max-width:140px;" /></td>
                                    <th>电话：</th>
                                    <td><input type="text" maxlength="11" name="ownerPhone" class="k-textbox" style="max-width:140px;" /></td>
                                </tr>
                                <tr>
                                    <th>地址：</th>
                                    <td colspan="3"><input type="text" class="k-textbox" name="ownerAddress" style="width:100%" /></td>
                                </tr>
                                <tr>
                                    <th style="vertical-align: top">备注：</th>
                                    <td colspan="3">
                                        <textarea style="resize:none; width:100%; height:200px" name="remark" class="k-textbox"></textarea>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div id="owner_header">
                            <img src="images/icon-default.png" />
                            <button class="lonix button">上传头像</button>
                        </div>
                    </article>
                </div>
                <div class="button-frame">
                    <button class="next-step">下一步</button>
                </div>
            </div>
            <div class="step-content-item" data-no="2">

                <div id="owner_vehicles">
                    <label>车辆登记</label>
                    <div class="vehicle_toolbar">
                    </div>

                    <div class="vehicle_div add"></div>
                </div>
                <div class="button-frame">
                    <button class="prev-step">上一步</button>
                    <button class="finish-step" onclick="shopVanEdit.saveOwnerInfo()">保存</button>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    var shopVanEdit = new ShopVanEdit($('#van_info_edit_frame'));
    $('button.prev-step').bind('click', function(e) {
        var no = $(this).parents('.step-content-item').attr('data-no');
        $('.step-head[data-no="'+(--no)+'"]').click();
    });
    $('button.next-step').bind('click', function(e) {
        var no = $(this).parents('.step-content-item').attr('data-no');
        $('.step-head[data-no="'+(++no)+'"]').click();
    });
    $('.step-head').bind('click', function(e) {
        if ($(this).hasClass('active')) {
            return;
        }
        var no = $(this).attr('data-no');
        $('.step-head').removeClass('active');
        $('.step-head').removeClass('completed');

        $(this).prevAll().addClass('completed');
        $(this).addClass('active');
        $('.step-content .step-content-item').fadeOut(200);
        $('.step-content .step-content-item[data-no="'+no+'"]').fadeIn(200);
    });
    if ($('.step-head.active').length < 1) {
        $('.step-head:eq(0)').click();
    }

    function removeVehicleDiv (a) {
        $(a).parents('.vehicle_div').remove();
    }
</script>